<template>
	<view>
		<view class="Evalute">
			<view class="User">
				<image :src="$imgUrls(pageData.v_headimg)" v-if="pageData.v_headimg" mode="aspectFill" class="Head">
				</image>
				<view class="Info">
					<view class="Info_user">
						<view class="d-flex a-center">
							<text class="color_33 size26">{{pageData.v_name}}</text>
							<!-- <view class="Vip">VIP等级</view> -->
						</view>
						<text class="color_33 size26">{{pageData.updated_at}}</text>
					</view>
					<u-rate count="5" :value="pageData.star" readonly :gutter="1" size="16"></u-rate>
				</view>
			</view>
			<text class="color_33 size26 ellipsis_2 m-top16">{{pageData.comment_word}}</text>
			<text class="color size26 m-top10">{{pageData.goods_name}}</text>
			<view class="Imgs" v-if="pageData.comment_pic">
				<image :src="$imgUrls(Itm)" mode="aspectFill" class="Imgsli"
					@click.stop="$common.ImageNum(inx,pageData.comment_pic)" v-for="(Itm,inx) in pageData.comment_pic"
					:key="inx"></image>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['pageData'],
		data() {
			return {
				Img: 'https://msraimgcdn.mogoie.com/6099/1693813515733.jpg',
				value: 2
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.Evalute {
		width: 100%;
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		flex-direction: column;

		.User {
			width: 100%;
			display: flex;
			align-items: center;

			.Head {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.Info {
				flex: 1;

				&_user {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.Vip {
						padding: 0 10rpx;
						color: #fff;
						font-size: 20rpx;
						background-color: var(--color);
						margin-left: 10rpx;
					}
				}
			}

		}

		.Imgs {
			width: 100%;
			margin-top: 20rpx;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 10rpx;
			box-sizing: border-box;

			.Imgsli {
				height: 200rpx;
				border-radius: 6rpx;
			}
		}
	}
</style>